<template class="cart">
	<view class="header">
		<view class="left">
			<text>购物车</text>
			<text>(2)</text>
		</view>
		<view class="right">
			管理
		</view>
	</view>
	<view class="empt">

	</view>
	<view class="content">
		<view class="box">
			<view class="storeName">
				<h4>JUDYDOLL橘朵旗舰店</h4>
			</view>
			<view class="goods">
				<ul>
					<li>
						<view class="dot" @click="addFn()"></view>
						<view class="photo">
							<image src="../../static/goods02.jpg" mode=""></image>
						</view>
						<view class="introduce">
							<p class="text01">橘朵水光唇膏口红显白保湿</p>
							<view class="number">
								<p class="text02">#09 赤玉辉 HOT</p>
								<uni-number-box :value="1" :min="1" width="20" background="#f8f8f8" color="#000" />
							</view>

							<p class="text03">先用后付 &nbsp; 七天无理由退换 </p>
							<text class="price01">¥</text>
							<text class="price02">69.8</text>
						</view>
					</li>
					<li>
						<view class="dot"></view>
						<view class="photo">
							<image src="../../static/kouhong02.jpg" mode=""></image>
						</view>
						<view class="introduce">
							<p class="text01">橘朵精华保湿滋养唇蜜玻璃唇镜面</p>
							<view class="number">
								<p class="text02">W08 流心烤柿</p>
								<uni-number-box :value="1" :min="1" width="20" background="#f8f8f8" color="#000" />
							</view>

							<p class="text03">先用后付 &nbsp; 七天无理由退换 </p>
							<text class="price01">¥</text>
							<text class="price02">59.8</text>
						</view>
					</li>
				</ul>
			</view>
		</view>
		<view class="box">
			<view class="storeName">
				<h4>Joocyee酵色旗舰店</h4>
			</view>
			<view class="goods">
				<ul>
					<li>
						<view class="dot"></view>
						<view class="photo">
							<image src="../../static/fendi06.jpg" mode=""></image>
						</view>
						<view class="introduce">
							<p class="text01">酵色修容盘腮红高光一体</p>
							<view class="number">
								<p class="text02">C02 冷调膨胀盘</p>
								<uni-number-box :value="1" :min="1" width="20" background="#f8f8f8" color="#000" />
							</view>

							<p class="text03">先用后付 &nbsp; 七天无理由退换 </p>
							<text class="price01">¥</text>
							<text class="price02">99</text>
						</view>
					</li>
					<li>
						<view class="dot"></view>
						<view class="photo">
							<image src="../../static/kouhong03.jpg" mode=""></image>
						</view>
						<view class="introduce">
							<p class="text01">酵色多用霜唇颊面多用唇泥</p>
							<view class="number">
								<p class="text02">C06 肉桂茶</p>
								<uni-number-box :value="1" :min="1" width="20" background="#f8f8f8" color="#000" />
							</view>

							<p class="text03">先用后付 &nbsp; 七天无理由退换 </p>
							<text class="price01">¥</text>
							<text class="price02">79.8</text>
						</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
	<view class="footer">
		<view class="dots"></view>
		<view class="total">
			<text>全选</text>
			<view class="totalMoney">
				<text>合计：</text>
				<text>¥</text>
				<text>0</text>
			</view>
		</view>
		<view class="btn">
			<button @click="goFn()" >结算</button>
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				isAdd : false,
				goods:[
					{
						storeName:"JUDYDOLL橘朵旗舰店",
						info:[
							{
								goodsimg:"../../static/goods02.jpg",
								intro:"橘朵水光唇音口红显白保湿",
								style:"#09 赤玉辉 HOT",
								momey:"69.8"
							},
							{
								goodsimg:"../../static/goods02.jpg",
								intro:"橘朵水光唇音口红显白保湿",
								style:"#09 赤玉辉 HOT",
								momey:"69.8"
							}
						]
					},{
						storeName:"JUDYDOLL橘朵旗舰店",
						info:{
							goodsimg:"../../static/goods02.jpg",
							intro:"橘朵水光唇音口红显白保湿",
							style:"#09 赤玉辉 HOT",
							momey:"69.8"
						}
					}
				]
			};
		},
		methods:{
			goFn(){
				uni.redirectTo({
					url:'/pages/payment/payment'
				})
			},
			detailFn(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},
			addFn(){
				this.isAdd = ! this.isAdd
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;

		display: flex;
		justify-content: space-between;
		padding: 14px;
		background-color: #fff;

		.left {
			text {
				letter-spacing: 1px;
			}

			text:nth-child(1) {
				font-size: 20px;
				font-weight: 600;
			}

			text:nth-child(2) {
				margin-left: 2px;
			}

		}

		.right {
			width: 60px;
			font-size: 15px;
		}
	}

	.empt {
		width: 100%;
		height: 40px;
	}

	.content {
		background-color: #f2f2f2;
		padding-bottom: 50px;

		.box {
			background-color: #fff;
			padding: 14px;
			margin: 10px 0;

			.goods {
				margin-top: 10px;

				ul {
					list-style: none;
					margin: 0;
					padding: 0;

					li {
						width: 100%;
						height: 95px;
						padding: 4px 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// border: 1px solid #ccc;

						.dot {
							width: 18px;
							height: 18px;
							border-radius: 50%;
							border: 1px solid #ccc;
						}

						.photo {
							width: 90px;
							height: 96%;
							border-radius: 10px;
							background-color: palegreen;

							image {
								width: 100%;
								height: 100%;
								border-radius: 10px;
							}
						}

						.introduce {
							width: 220px;
							height: 96%;

							.text01 {
								font-size: 14px;
							}

							.number {
								display: flex;
								justify-content: space-between;
								margin-top: 2px;

								.text02 {
									font-size: 13px;
									color: #99a1aa;
									margin-top: 6px;
								}
							}

							.text03 {
								font-size: 10px;
								color: #cfb56a;
								margin-top: 4px;
								margin-bottom: 5px;
							}

							.price01 {
								font-size: 12px;
								font-weight: 600;
								color: #f57a73;
							}

							.price02 {
								font-size: 20px;
								font-weight: 600;
								color: #f57a73;
								font-family: 黑体;
							}
						}
					}
				}


			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		bottom: 50px;
		width: 100%;
		height: 54px;
		display: flex;;
		background-color: #fff;
		align-items: center;
		padding: 0 14px;
		
		.dots {
			width: 18px;
			height: 18px;
			border-radius: 50%;
			border: 1px solid #ccc;
			margin-right: 6px;
		}
		
		.total {
			width: 216px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			text {
				color: #9ca1ac;
				font-size: 14px;
			}
			
			.totalMoney {
				
				text:nth-child(1){
					color: #000;
				}
				
				text:nth-child(2){
					color: #f57a73;
					font-size: 18px;
					font-weight: 600;
				}
				
				text:nth-child(3){
					color: #f57a73;
					font-size: 24px;
					font-weight: 600;
				}
			}
		}
		
		.btn{
			width: 100px;
			margin-left: 10px;
			button{
				width: 100px;
				height: 38px;
				color: #000;
				font-size: 16px;
				border: none;
				background-color: #ebb7bb;
			}
		}
	}
	
	
</style>